<template>
    <view>
    <!-- <view>
     <u-navbar   back-text="返回" title="注册账号"></u-navbar>
    </view> -->
     <view class="registerP">
 
    <view class="user-pwd">
      <view class="userP">
        <image
          :style="{ width: '1.3rem',height:'1.3rem'}"
          src="../../style/image/login/A6.png"
          alt=""
        />
        <view  class="inputC">
            <u-input :clearable='true'  v-model="userInput" type="text" placeholder="账号"   />
            </view>
       <view>
       
       </view>
      </view>

      <view class="pwdP">
        <image
          :style="{ width: '1.3rem' ,height:'1.3rem'}"
          src="../../style/image/login/A2.png"
          alt=""
        />
        <view  class="inputC" style="padding-left: 0rem;" >
              <u-input    v-model="pwdInput" :type="passwordType" placeholder="密码"   />
            </view>
      
      </view>

      <view class="pwdP">
        <image
          :style="{  width:'1.3rem' ,height:'1.3rem'}"
          src="../../style/image/login/A2.png"
          alt=""
        />
         <view  class="inputC"  style="padding-left: 0rem;">
               <u-input    v-model="pwdInputs" :type="passwordType" placeholder="确认密码"   />
            </view>
        
      </view>

      <view class="pwdP">
        <image
          :style="{  width:'1.4rem',height:'1.3rem'}"
          src="../../style/image/login/A5.png"
          alt=""
        />
         <view  class="inputC" style="padding-left: 2rem;">
              <u-input    v-model="verifyInput" type="text" placeholder="获取验证码"   />
            </view>
       <view v-if="canClick"  @click="sendNum" :style="{ color:'#41c396',width:'5rem',textAlign: 'center' }" >获取验证码</view>

       <u-count-down  @end='endM' :style="{ color:'#41c396',width:'5rem',display: 'flex',justifyContent: 'center' }"  v-else  ref="uCountDown" :show-hours="false" :timestamp="60"></u-count-down>

      </view>
    </view>


        <view class="forgotP" >
        <view class="loginBtnP">
      <view class="loginBtn" @click="goRecommend"  >完成</view>
    </view>
        </view>
    
  </view>

    <u-toast ref="uToast" />
    
    </view>
    
 
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import '@/uview-ui/components/u-button/u-button.vue'
import uNavbar from '@/uview-ui//components/u-navbar/u-navbar.vue'

import { globalModule } from '../../utils/uniRequest';
import { forGotpwd ,sendMsgCDB }  from  '../../utils/uniApi' 

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",

  //         filters:{
  //     Test(arg: string){
  //       return arg + "  我来刷点存在感"
  //     }
  //   },
  //   directives:{
  //     Test(arg: string){
  //       return arg + "  我来刷点存在感"
  //     }
  //   }
})
export default class extends Vue {
  // props: ['postTitle'],

  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  childMsg: string = "自组件的数据";

  //test:string=msg
  test1: string = "eqweqweqweqw";

  msgC: string = "子组件的msgC数据";

  public userInput = "";
  public pwdInput = "";
  public pwdInputs="";
  public passwordType='password'
  public verifyInput=''
  public canClick=true

  public timestamp=6
  public seconds=0

   public  recCode= ''   //推荐码

  created() {

  // uni.showNavigationBarLoading()
  
    // wx.setNavigationBarTitle({
    //   title: "注册账号",
    // });

    console.log("313123123");
  }

  goBack(){
     console.log('123312')

           uni.navigateTo({
		     	url:"../login/index"
		      })

    }

       endM(){
   console.log('倒计时结束')
     this.canClick=true
   }

      sendNum(){

        if(this.canClick==true){

       console.log('发送验证码')

      var params={
        phone:this.userInput,
        recCode:this.recCode,
        type:'pwd'
      }

       sendMsgCDB(params).then((res:any)=>{

              // console.log(6)

          (this.$refs.uToast as any).show({
					title: res.data.message,
					type: 'primary',
				    })

       })

       this.canClick=false
       	uni.hideLoading();

        }else{


           this.canClick=true
        
        }
    
    }

  goRecommend(){
  
        if(this.pwdInput==this.pwdInputs){
     console.log(123)

      let params={
          code:this.verifyInput,
          password:this.pwdInput,
          phone:this.userInput,
		  oid:globalModule.oid,
      }

   forGotpwd(params).then((res:any)=>{


        // console.log(res+'res8888')

         (this.$refs.uToast as any).show({
					title: res.data.message,
					type: 'primary',
				})

        if(res.data.message=='密码重置成功'){
            localStorage.clear()
                  uni.navigateTo({
		         	url:"../login/index"
	      	})
        }

       

   })



  }else{
  
            (this.$refs.uToast as any).show({
					title: '请确认两次密码！',
					type: 'error',
				})
  }

  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }
//   onBackPress(options:any) {
//   console.log(options,'12312312312')
// 	// if (options.from === 'backbutton') {
// 	// 	if (this.editShow.edit) {
// 	// 		uni.showModal({
// 	// 			title: '提示',
// 	// 			content: '回执信息未保存，是否离开',
// 	// 			success: res => {
// 	// 				if (res.confirm) {
// 	// 					uni.navigateBack();
// 	// 				}
// 	// 			}
// 	// 		});
// 	// 		// 禁止默认返回
// 	// 		return true;
// 	// 	}
// 	// }
// }

  @Emit("bindSend") //@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
  send(msgC: string) {
    //return 123      //如果没有返回值 那么传递的参数就是参数
  }

  childPropMsg() {
    //方法中获取this
    this.msgC = "子组件的msg数据,被传给了父组件";
    this.send(this.msgC);
  }

  @Watch("$route")
  routechange(to: any, from: any) {
    // if (to.query.name!=from.query.name) {
    // }
    console.log(to);
  }

  //         // dynamic component
  // 51   $refs!: {
  // 52     helloComponent: Hello
  // 53   }
}
</script>

<style  lang="scss"  scoped>
.uni-page-head__title {
  font-weight: 400;
}

.registerP {
  padding: 1rem 2rem;
}


  .userP {
    display: flex;
    align-items: center;
    margin: 2rem 0rem 1rem 0rem;
    padding: 0.3125rem 0rem;
    border-bottom: 1px solid #dfdfdf;
    justify-content: space-between;
  }
  .pwdP {
    display: flex;
    align-items: center;
    margin: 2rem 0rem 1rem 0rem;
    padding: 0.3125rem 0rem;
    border-bottom: 1px solid #dfdfdf;
    justify-content: space-between;
  }
  .inputC{
     width: 80%;
     padding-left: 1rem;
  }

  .forgotP{
        margin-top: 2rem;
   
  }
   .loginBtnP {
    width: 100%;
    display: flex;
    justify-content: center;
  
  }

    .loginBtn {
      width: 14rem;
      padding: 0.5rem;
      background-color: #02af74;
      border-radius: 0.5rem;
      color: white;
      text-align: center;
      font-size: 1.1rem;
    }

  

</style>